
<template>
    <div class="container">
        <el-card style="width: 1200px;height: 650px;">
            <template #header>
                <div style="margin-left: 45%; height: 30px;margin-top: -20px">
                    <h1>
                        {{ chooseProblem.id }}:{{ getProblemType(chooseProblem.type, $t) }}
                        <el-text style="margin-left: 30%;">({{ $t('textView.right') }}：{{ right }}，{{ $t('textView.wrong')
                        }}：{{ wrong }}，{{ $t('textView.accuracy') }}：{{ (100.0 * right / (right + wrong)).toFixed(2) }}%)</el-text>
                    </h1>
                </div>
            </template>
            <div>
                <!-- v-show="chooseProblem.problemCode && chooseProblem.problemCode.length>0" -->
                <div class="left">
                    <div class="problemCode">
                        <pre><code :class=getCodeLanguge(chooseProblem.codeLanguage)>{{ chooseProblem.problemCode && chooseProblem.problemCode.length > 0 ? chooseProblem.problemCode : $t('textView.noCode') }}</code></pre>
                    </div>
                </div>
                <div class="right">
                    <div class="problemDescribe">
                        <h2>{{ $t('textView.problemDescription') }}</h2>
                        <div style="overflow-y: auto; max-height: 200px;">
                            {{ chooseProblem.problemDescribe }}
                        </div>
                    </div>

                    <div style="text-align: center;" v-if="chooseProblem.type === 2 || chooseProblem.type === 5">
                        <h2>{{ $t('textView.inputAnswer') }}</h2>
                        <el-input v-model="input" style="width: 440px;" :rows="10" type="textarea"
                            placeholder="Please input" />
                    </div>

                    <div style="display: flex; justify-content: center;  align-items: center; "
                        v-else-if="chooseProblem.type === 1">
                        <el-radio-group v-model="input">
                            <el-radio v-for="(options, index) in chooseProblem.optionDescribe"
                                :value="String.fromCharCode(index + 65)">
                                <b>{{ String.fromCharCode(index + 65) }} : {{ options }}</b>
                            </el-radio>
                        </el-radio-group>
                    </div>


                    <div style="display: flex; justify-content: center;  align-items: center; "
                        v-else-if="chooseProblem.type === 4">
                        <el-checkbox-group v-model="inputMultiple">
                            <el-checkbox v-for="(options, index) in chooseProblem.optionDescribe"
                                :value="String.fromCharCode(index + 65)">
                                <b>{{ String.fromCharCode(index + 65) }} : {{ options }}</b>
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>

                    <div style="display: flex; justify-content: center;  align-items: center; " v-else>
                        <el-radio-group v-model="input">
                            <el-radio style="width: 100px;" value="正确" border>正确</el-radio>
                            <el-radio style="width: 100px; margin-top: 10px;" value="错误" border>错误</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
            <!-- <template #footer>Footer content</template> -->
        </el-card>
    </div>
    <div style="text-align: center;margin-top: 15px;">
        <div v-show="!submitted">
            <el-button type="primary" size="large" @click="submitAnswer(chooseProblem.id, (chooseProblem.type === 4))"
                :loading="isLoading">

                {{ $t('textView.submitAnswer') }}
            </el-button>
        </div>
        <div v-show="submitted">
            <el-button type="primary" size="large"
                @click="submitted = false; getRandomProblem(); input = ''; inputMultiple = []; chooseProblem.optionDescribe = []">下一道题</el-button>
            <el-button type="primary" size="large" @click="showProblemDetail = true" text>{{ $t('problemView.answerAnalysis')
            }}</el-button>
        </div>
    </div>


    <div class="dialog">
        <el-dialog v-model="showProblemDetail" width="60%" draggable overflow>
            <template #header>
                <div style="text-align: center; font-size: 30px;">{{ $t('problemView.answerAnalysis') }}</div>
            </template>
            <div class="dialog-container">
                <div class="text">
                    <div><el-text class="font"><b>{{ $t('problemView.answer') }}</b>
                            <div v-for="answer in judgeResult.answer" :key="answer" style="margin-top: 10px;">
                                {{ answer }}
                            </div>
                        </el-text></div>
                    <div style="margin-top: 10px;">
                        <el-text class="font"><b>{{ $t('problemView.analysis') }}</b>
                            <div style="margin-top: 10px;">{{ judgeResult.analysis }}</div>
                        </el-text>
                    </div>
                </div>
            </div>

        </el-dialog>
    </div>

    <transition name="fade-scale">
        <span v-if="showMessage" :class="judgeResult.isRight ? 'message' : 'message-error'">{{ judgeResult.isRight ? "答案正确" : "答案错误"
        }}</span>
    </transition>
</template>


<script setup lang="ts">
import useProblem from '@/hooks/useProblem'
import { useproblemStore } from '@/stone/problem'
import { onMounted, ref } from 'vue'
import useEnum from '@/base/useEnum';
import useTest from '@/hooks/useTest';

const { showProblemDetail, chooseProblem, problemParm, getRandomProblem } = useProblem()
const problemStore = useproblemStore()
const { getProblemType, getCodeLanguge } = useEnum();
const { showMessage, isLoading, judgeResult, right, wrong, submitted, input, inputMultiple, submitAnswer } = useTest()
onMounted(() => {
    problemParm.value = problemStore.problemParm
    getRandomProblem()
})

</script>


<style scoped>
.container {
    margin-top: 25px;
    margin-left: 10%;
}

.right {
    width: 50%;
    float: right;
}



.problemDescribe {
    text-align: center;

    margin-top: -30px;
    margin-bottom: 30px;
    word-wrap: break-word;
    white-space: normal;

}

.problemCode {
    height: 100%;
}

.left {
    width: 50%;
    float: left;
    height: 500px;
}

.font {
    font-size: 21px;
}

/* .look-answer{
            margin-top: 10px;
            display: flex;  
            justify-content: center;
        } */


.dialog-container {
    text-align: center;
    position: relative;
    width: 95%;

    padding: 20px;

}

pre[class*="language-"] {
    height: 500px;
    overflow-y: auto;

}

:deep(.el-radio-group) {
    display: block;
}

:deep(.el-radio) {
    display: block;
}





.message-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    color: #fff;
    background-color: #f62f03;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 14px;
    opacity: 0;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    color: #fff;
    background-color: rgb(26, 159, 48);
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 14px;
    opacity: 0;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.fade-scale-enter-active,
.fade-scale-leave-active {
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.fade-scale-enter,
.fade-scale-leave-to {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

.fade-scale-enter-to,
.fade-scale-leave {
    transform: translate(-50%, -50%) scale(2.5);
    /* 稍微放大一点 */
    opacity: 1;
}

/* 确保消息在按钮上方显示 */
.el-button .message {
    z-index: 1;
}</style>